<template>
	<div class="tree-container layout-pd">
		<el-card shadow="hover">
			<div class="system-menu-search mb15">
				<el-input size="default" v-model="state.filterText" placeholder="请输入权限名称" style="max-width: 180px"></el-input>
				<el-button size="default" type="primary" class="ml10" @click="searchName">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button size="default" type="success" class="ml10" @click="onOpenAddItem('add', { id: 0 })">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增项目
				</el-button>
			</div>
			<div v-loading="state.treeLoading">
				<div class="tree-head">
					<!--					<div class="tree-head-check"><el-checkbox v-model="state.treeCheckAll" @change="onCheckAllChange"></el-checkbox></div>-->
					<div class="tree-head-one">权限名称</div>
					<div style="flex: 1; display: flex">
						<div class="tree-head-two">环境</div>
						<div class="tree-head-three">部署位置</div>
						<div class="tree-head-four">操作</div>
					</div>
				</div>
				<el-tree
					ref="treeRef"
					node-key="id"
					:highlight-current="true"
					:data="state.tableData.data"
					:props="state.defaultProps"
					:filter-node-method="filterNode"
					:default-expanded-keys="state.defaultExpandedKeys"
					@node-expand="onNodeExpand"
					@node-collapse="onNodeCollapse"
				>
					<template #default="{ node, data }">
						<span class="tree-custom-node">
							<span style="flex: 1">
								<el-icon>
									<FolderOpened v-if="data.nodeType == 'folder'" />
									<Document v-else-if="data.nodeType == 'leaf'" />
								</el-icon>
								{{ data.name }}</span
							>
							<span style="flex: 1; display: flex">
								<span style="flex: 1">{{ data.meta.envName }}</span>
								<span style="flex: 1">{{ displayDeployPosition(data) }}</span>
								<span style="flex: 1; text-align: right">
									<el-button v-if="data.nodeType == 'folder'" size="small" text type="primary" @click.stop="onOpenAddItem('add', data)"
										>新增
									</el-button>
									<el-button size="small" text type="primary" @click.stop="onOpenCopyItem('copy', data)">复制</el-button>
									<el-button size="small" text type="primary" @click.stop="onOpenAddItem('edit', data)">修改</el-button>
									<el-button size="small" text type="primary" @click.stop="onOpenPrivilege(data)">授权</el-button>
									<el-button size="small" text type="primary" @click.stop="onTabelRowDel(data)">删除</el-button>
								</span>
							</span>
						</span>
					</template>
				</el-tree>
			</div>
		</el-card>
		<ItemDialog ref="itemDialogRef" @refresh="getTableData()" />
		<PrivilegeDialog ref="privilegeDialogRef" />
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive, toRef } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { setBackEndControlRefreshRoutes } from '/@/router/backEnd';
import { itemApi } from '/@/api/item';
import { Document, FolderOpened } from '@element-plus/icons-vue';
import PrivilegeDialog from '/@/views/resource/privilege/privilegeDialog.vue';
import Constants from '/@/constant/constants';
import lodash from 'lodash';

// 引入组件
const ItemDialog = defineAsyncComponent(() => import('/@/views/resource/item/itemDialog.vue'));

// 定义变量内容
const treeRef = ref();
const itemDialogRef = ref();
const privilegeDialogRef = ref();

const state = reactive({
	tableData: {
		data: [],
		param: {
			query: '',
			type: Constants.RESOURCE_TYPE.ITEM,
		},
		loading: true,
	},
	defaultExpandedKeys: [],
	expandedKeys: [],
	defaultProps: {
		children: 'children',
		label: 'name',
	},
	filterText: '',
	envData: [],
	envDataMap: {},
});

// 获取路由数据，真实请从接口获取
const getTableData = () => {
	itemApi()
		.getItemManageTree()
		.then((res) => {
			state.tableData.data = res.data;
			state.defaultExpandedKeys = state.expandedKeys;
		});
};

// 打开新增菜单弹窗
const onOpenAddItem = (type: string, row) => {
	itemDialogRef.value.openDialog(type, row);
};
const onOpenCopyItem = (type: string, row) => {
	let newRow = lodash.cloneDeepWith(row, (value, key, obj) => {
		if (key === 'children' && obj === row) {
			return obj.nodeType == 'leaf' ? null : [];
		}
	});
	itemDialogRef.value.openDialog(type, newRow);
};
const onOpenPrivilege = (row: Object) => {
	privilegeDialogRef.value.openDialog(state.tableData.param.type, row);
};

const onNodeExpand = (data: Object) => {
	state.expandedKeys.push(data.id);
};

const onNodeCollapse = (data: Object) => {
	state.expandedKeys = state.expandedKeys.filter((item: any) => item != data.id);
};

const displayDeployPosition = (row: any) => {
	if (row.deployType == 'k8s') {
		return row.meta.deployClusterName;
	} else if (row.deployType == 'node') {
		return row.deployIps;
	}
	return '';
};

const searchName = () => {
	treeRef.value!.filter(state.filterText);
};

const filterNode = (value: string, data: Tree) => {
	if (!value) return true;
	return data.name.includes(value);
};

// 删除当前行
const onTabelRowDel = (row: RouteRecordRaw) => {
	ElMessageBox.confirm(`此操作将永久删除项目：${row.name}, 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			itemApi()
				.delItemNode(row)
				.then(() => {
					ElMessage.success('删除成功');
					getTableData();
					setBackEndControlRefreshRoutes(); // 刷新菜单
				});
		})
		.catch(() => {});
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
<style scoped lang="scss">
.tree-container {
	.tree-head {
		height: 48px;
		line-height: 48px;
		border: 1px solid var(--next-border-color-light);
		border-bottom: none;
		display: flex;
		padding-right: 8px;
		font-weight: bold;
		color: #909399;

		.tree-head-check {
			width: 38px;
			text-align: right;
		}

		.tree-head-one,
		.tree-head-two,
		.tree-head-three,
		.tree-head-four {
			flex: 1;
		}
	}

	.el-tree {
		overflow: hidden;
		border-bottom: 1px solid var(--next-border-color-light);

		.tree-custom-node {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 8px;
			width: 100%;
		}

		&:deep(.el-tree-node) {
			border: 1px solid var(--next-border-color-light);
			border-bottom: none;
			color: #606266;

			.el-tree-node__content {
				line-height: 57px !important;
				height: 57px !important;
			}

			.el-tree-node__children {
				.el-tree-node {
					border: none;
				}

				.el-tree-node__content {
					border-top: 1px solid var(--next-border-color-light);
				}
			}
		}
	}
}
</style>
